<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    label { display: block; margin-top: 10px; }
    input { margin-top: 5px; }
    button { margin-top: 10px; }
    .message { margin-top: 10px; color: red; } /* 错误消息样式 */
  </style>
</head>
<body>
  <h1>登录</h1>
  <div>
    <label for="loginName">用户名：</label>
    <input type="text" id="loginName">
    <label for="loginPassword">密码：</label>
    <input type="password" id="loginPassword">
    <button onclick="login()">登录</button>
  </div>
  <div>
    <a href="register.html">没有账号？注册</a>
  </div>
  <div class="message" id="message"></div> <!-- 添加消息显示区域 -->

  <script>
    async function login() {
      const loginName = document.getElementById('loginName').value;
      const password = document.getElementById('loginPassword').value;

      const response = await fetch('http://localhost:3000/api/users/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ loginName, password })
      });

      const result = await response.json();


      const messageDiv = document.getElementById('message'); // 获取消息显示区域

      if (response.ok) {
        localStorage.setItem('token', result.token);
        messageDiv.style.color = 'green'; // 成功时消息颜色为绿色
        messageDiv.textContent = '登录成功，正在跳转到待办事项页面...';
        setTimeout(() => {
          window.location.href = 'todo.html';
        }, 2000); // 等待2秒再跳转
      } else {
        messageDiv.style.color = 'red'; // 失败时消息颜色为红色
        messageDiv.textContent = `登录失败: ${result.message}`;
      }
    }
  </script>
</body>
</html>



